<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="api密钥列表"
      row-key="path"
      :indent="30"
      :request-api="getTableList"
      :columns="columns"
      :pagination="true"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增api密钥 </el-button>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)"> 查看 </el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete"> 删除 </el-button>
      </template>
    </ProTable>
    <ApiKeyDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="ts" name="roleMange">
import { ref } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus, View } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import { getApiKeyList, saveApiKey, ApiKey } from "@/api/ai/apiKey/index";
import ApiKeyDrawer from "./detail.vue";
const proTable = ref();

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
  delete newParams.createTime;
  return getApiKeyList(newParams);
};
const drawerRef = ref<InstanceType<typeof ApiKeyDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<ApiKey.ReqApiKey> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? saveApiKey : title === "编辑" ? saveApiKey : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};

// 表格配置项
const columns: ColumnProps[] = [
  { type: "sort", label: "排序", width: 80 },
  { prop: "name", label: "名称", align: "left" },
  { prop: "apiKey", label: "密钥" },
  { prop: "platform", label: "平台" },
  { prop: "status", label: "状态" },
  { prop: "url", label: "API 地址" },
  { prop: "createBy", label: "创建人" },
  { prop: "createTime", label: "创建时间" },
  { prop: "updateBy", label: "更新人" },
  { prop: "updateTime", label: "更新时间" },
  { prop: "operation", label: "操作", width: 350, fixed: "right" }
];
</script>
